<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>14-dom操作的演示.html</title>


    <style>
        div{
            height: 100px;
            width: 100px;
            background-color: skyblue;
        }
    </style>

</head>
<body>

<button onclick="demo01()"> 拿到节点1 </button>
<button onclick="demo02()"> 拿到节点2 操作 文本 </button>
<button onclick="demo03()"> 拿到节点3 操作 css </button>
<div id="div">
    hello
</div>

<script>

    //拿到 div
    let divNode = document.querySelector("#div");
    function demo01(){
        let a = document.querySelector("#div");
        console.log(a)
    }

    function demo02(){

        //拿到节点 使用 innerHTML 拿到文本
        let content = divNode.innerHTML;
        console.log(content)

    }

    function demo03(){

        //拿到节点 使用 css 操作 style
        divNode.style.backgroundColor = "yellow"

    }


</script>

</body>
</html>